<template>
  <div class="hidden-scrollbar">
    <!-- 返回图标 -->
    <back-arrow></back-arrow>
    <!-- 顶部导航条 -->
    <van-nav-bar v-appeartopvm="46" v-if="film" :title="film.name" fixed left-arrow @click-left="$router.back()" />
    <!-- 电影海报 -->
    <film-poster></film-poster>
    <!-- 电影信息 -->
    <film-info></film-info>
    <!-- 演职人员列表 -->
    <film-actors></film-actors>
    <!-- 剧照 -->
    <film-photos></film-photos>
    <!-- 选座购票按钮 -->
    <button v-if="film && film.isSale" @click="$router.push(`/film/${filmId}/cinemas`)">选座购票</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
import { NavBar } from 'vant'
import BackArrow from '@/components/BackArrow'
import FilmPoster from './FilmPoster.vue'
import FilmInfo from './FilmInfo.vue'
import FilmActors from './FilmActors.vue'
import FilmPhotos from './FilmPhotos.vue'
import { directiveMixins } from '@/mixins'

export default {
  name: 'FilmView',
  props: ['filmId'], // filmId为路由参数，配置见router下的index.js
  mixins: [directiveMixins],
  components: {
    [NavBar.name]: NavBar,
    BackArrow,
    FilmPoster,
    FilmInfo,
    FilmActors,
    FilmPhotos
  },
  computed: {
    ...mapState('CityModule', ['cityId']),
    ...mapState('FilmModule', ['film'])
  },
  methods: {
    ...mapMutations('FilmModule', ['setFilm']),
    ...mapActions('FilmModule', ['getFilm'])
  },
  mounted () {
    this.getFilm({
      filmId: this.filmId,
      cityId: this.cityId
    })
  }
}
</script>

<style lang="scss" scoped>
button {
  position: fixed;
  width: 100vw;
  height: 50px;
  bottom: 0;
  text-align: center;
  background-color: #ff5f16;
  border: 0;
  color: #fff;
  font-size: 16px;
  line-height: 50px;
  z-index: 101;
  cursor: pointer;
}
</style>
